<template>
  <div class="main-wrap">
     <navigators :back-text="back" :bg-color="bgColor" :is-white="whites"></navigators>
        <div class="contact-con">
        <div class="contact-01" ref="con01"></div>
        <div class="contact-02" ></div>
          <div class="contact-03" @click="isMask=!isMask">
            <div class="mask-con" v-show="isMask"></div>
            <div class="contact-map" id="container">

            </div>

          </div>

          <div class="message-con">
            <h2 class="mess-tit">
              Send A Message
              <p class="sub-tit">留言后我们会尽快联系您</p>
            </h2>
            <ul class="message-list">
              <li>
                <div class="ipt-pare">
                  <input type="text" placeholder="您的邮箱地址" />
                </div>
              </li>
              <li>
                <div class="ipt-pare">
                  <input type="text" placeholder="您的姓名" />
                </div>
              </li>
              <li>
                <div class="ipt-pare">
                  <input type="text" placeholder="您的电话">
                </div>
              </li>
              <li>
                <div class="ipt-pare">
                  <textarea class="txt-area-con" placeholder="您的留言内容"></textarea>

                </div>
              </li>
              <li class="botton-con">
                <button class="send-btn">确认留言</button>
              </li>
            </ul>
          </div>

        <div class="pattern-bottom-con">

        </div>
        <scrolls></scrolls>
     </div>

  </div>
</template>

<script>
  import navigators from '../components/headers.vue';
  import scrolls from '../components/scroll.vue'
  export default {
    name: 'index',
    data () {
      return {
        heights:window.innerHeight,
        back:"返回",
        bgColor:'none',
        whites:true,
        _height:440,
        maps:"",
        isMask:true
      }
    },
    created(){
      this.getMaps();
    },
    mounted(){
     var vm=this;
     vm._height=vm.$refs.con01.offsetHeight-100;
      this.$nextTick(function(){
          window.addEventListener("scroll",vm.isNeedWhite)
       })
    },
    methods:{
      isNeedWhite(){
         let vm=this;
         let curHeight = document.documentElement.scrollTop || document.body.scrollTop;

         vm.whites=curHeight>=vm._height? false :true;
      },
      getMaps(){
        var vm=this;
        var geocoder = new AMap.Geocoder({
          radius: 1000 //范围，默认：500
        });
        //地理编码,返回地理编码结果
        geocoder.getLocation("湖南长沙市芙蓉中路98号明城国际中心", function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            geocoder_CallBack(result);
          }
        });


        function addMarker(i, d) {
          var marker = new AMap.Marker({
            map: vm.mapping,
            position: [ d.location.getLng(),  d.location.getLat()]
          });
          var infoWindow = new AMap.InfoWindow({
            content: d.formattedAddress,
            offset: {x: 0, y: -30}
          });
          marker.on("mouseover", function(e) {
            infoWindow.open(vm.mapping, marker.getPosition());
          });
        }
        //地理编码返回结果展示
        function geocoder_CallBack(data) {

          //地理编码结果数组
          var geocode = data.geocodes;

          for (var i = 0; i < geocode.length; i++) {

            addMarker(i, geocode[i]);
          }
          vm.mapping.setFitView();

        }

      }
    },
    computed:{
      mapping(){
        return new AMap.Map("container", {
          resizeEnable: true,
          zoom: 16
        })
      }

    },
    components:{
      navigators,
      scrolls
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   @import'../css/contact.css';
</style>


